<template>
  <div class="baseinfo c-shadow">
    <jTabNav :items="tabList"></jTabNav>
    <h4 class="detail-base-title" ref="baseInfo1">工商信息<span>1</span></h4>
    <div class="table-wrap">
      <table class="business">
        <tr>
          <th>统一社会信用代码</th>
          <td>{{businessData.societyCode ||'--'}}</td>
          <th>组织机构代码</th>
          <!-- TODO: -->
          <td>{{businessData.registationNo || '--'}}</td>
        </tr>
        <tr>
          <th>注册号</th>
          <td>{{businessData.registationNo ||'--'}}</td>
          <th>经营状态</th>
          <td>{{businessData.registerStatus ||'--'}}</td>
        </tr>
        <tr>
          <th>所属行业</th>
          <!-- TODO: -->
          <td>{{industry ||'--'}}</td>
          <th>成立日期</th>
          <!-- TODO: -->
          <td>{{businessData.registerDate | dateFormat}}</td>
        </tr>
        <tr>
          <th>公司类型</th>
          <td>{{businessData.type ||'--'}}</td>
          <th>营业期限</th>
          <td>{{businessData.operatingPeriodStart | dateFormat}}/{{businessData.operatingPeriodEnd | dateFormat}}</td>
        </tr>
        <tr>
          <th>法定代表人</th>
          <td>{{businessData.legalPerson ||'--'}}</td>
          <th>发照日期</th>
          <!-- TODO: -->
          <td>{{businessData.revocateDate | dateFormat}}</td>
        </tr>
        <tr>
          <th>注册资本</th>
          <td>{{(businessData.money ||'--')+''+(businessData.moneyCurrency ||'')}}</td>
          <th>登记机关</th>
          <td>{{businessData.registerOrganization ||'--'}}</td>
        </tr>
        <!-- <tr>
          <th>微信公众号</th>
          <td colspan="3" class="long">{{businessData.WeiXin ||'--'}}</td>
        </tr> -->
        <tr>
          <th>企业地址</th>
          <td colspan="3" class="long">{{businessData.location ||'--'}}</td>
        </tr>
        <tr>
          <th>经营范围</th>
          <td colspan="3" class="long">{{businessData.businessScope ||'--'}}</td>
        </tr>
      </table>
    </div>
    <h4 class="detail-base-title" ref="baseInfo2">股东信息<span>{{shareholderPager.total}}</span></h4>
    <j-no-data v-if="shareholderData.length === 0" :mode="'b'" msg="b"></j-no-data>
    <div v-else class="table-wrap">
      <table>
        <thead>
          <tr>
            <th v-for="title in shareholderTitle" :key="title">{{title}}</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item,index) in shareholderData" :key="index">
            <td>{{item.type || '--'}}</td>
            <td>{{item.name || '--'}}</td>
            <td>{{item.subscribedAmount | nulldie}}<span>/</span>{{item.subscribedDate | nulldie}}</td>
            <td>{{item.paidAmount | nulldie}}<span>/</span>{{item.paidDate | nulldie}}</td>
          </tr>
        </tbody>
      </table>
      <div class="clearFix paging-wrap">
        <el-pagination
        v-if="shareholderPager.total>10"
          class="fr "
          @current-change="shareholderPaging"
          :current-page.sync="shareholderPager.pageNum"
          :page-size="shareholderPager.pageSize"
          layout="prev, pager, next, jumper"
          :total="shareholderPager.total">
        </el-pagination>
      </div>
    </div>
    <h4 class="detail-base-title" ref="baseInfo3">主要人员<span>{{personPager.total}}</span></h4>
    <j-no-data v-if="majorPerson.length === 0" :mode="'b'" msg="b"></j-no-data>
    <div class="table-wrap">
      <table>
        <tr v-for="item in majorPerson" :key="item.id">
          <th>{{item.job || '--'}}</th>
          <td>{{item.name || '--'}}</td>
          <!-- <th>{{item.department || '--'}}</th>
          <td>{{item.name || '--'}}</td>
          <th v-if="item.department1">{{item.department1 ||''}}</th>
          <td v-if="item.name1">{{item.name1 ||''}}</td> -->
        </tr>
      </table>
      <div class="clearFix paging-wrap">
        <el-pagination
        v-if="personPager.total>10"
          class="fr "
          @current-change="personPaging"
          :current-page.sync="personPager.pageNum"
          :page-size="personPager.pageSize"
          layout="prev, pager, next, jumper"
          :total="personPager.total">
        </el-pagination>
      </div>
    </div>
    <h4 class="detail-base-title" ref="baseInfo4">工商变更<span>{{businessPager.total}}</span></h4>
    <j-no-data v-if="businessChangeData.length === 0" :mode="'b'" msg="s"></j-no-data>
    <div v-else class="table-wrap">
      <table class="business-change">
        <thead>
          <tr>
            <th v-for="title in businessChange" :key="title">{{title}}</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item,index) in businessChangeData" :key="item.before">
            <td class="text-c" width=74>{{index + 1}}</td>
            <td style="width:200px;">{{item.changeDate | dateFormat}}</td>
            <td style="width:208px;">{{item.projectName || '--'}}</td>
            <td>{{item.beforeContent || '--'}}
              <!-- <i class="iconfont icon-ico"></i> -->
            </td>
            <td>{{item.afterContent || '--'}}</td>
            <!-- <td style="width:208px;">{{item.changeItem || '--'}}</td>
            <td>{{item.changeBefore || '--'}}</td>
            <td>{{item.changeAfter || '--'}}</td> -->
          </tr>
        </tbody>
      </table>
      <div class="clearFix paging-wrap">
        <el-pagination
        v-if="businessPager.total>10"
          class="fr "
          @current-change="entchangePaging"
          :current-page.sync="businessPager.pageNum"
          :page-size="businessPager.pageSize"
          layout="prev, pager, next, jumper"
          :total="businessPager.total">
        </el-pagination>
      </div>
    </div>
    <!-- 后期使用 -->
    <!-- <h4 class="detail-base-title" ref="baseInfo5">微信公众号<span>{{weichartPager.total}}</span></h4>
    <j-no-data v-if="weichartData.length === 0" :mode="'b'" msg="b"></j-no-data>
    <div v-else class="table-wrap">
      <table class="business-change">
        <thead>
          <tr>
            <th v-for="title in weichartTitle" :key="title">{{title}}</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item,index) in weichartData" :key="index">
            <td class="text-c" width=74>{{index + 1}}</td>
            <td style="width:200px;">{{item.changeDate | dateFormat}}</td>
            <td style="width:208px;">{{item.projectName || '--'}}</td>
            <td>{{item.beforeContent || '--'}}</td>
            <td>{{item.afterContent || '--'}}</td>
          </tr>
        </tbody>
      </table>
      <div class="clearFix paging-wrap">
        <el-pagination
        v-if="weichartPager.total>10"
          class="fr "
          @current-change="weichartPaging"
          :current-page.sync="weichartPager.pageNum"
          :page-size="weichartPager.pageSize"
          layout="prev, pager, next, jumper"
          :total="weichartPager.total">
        </el-pagination>
      </div>
    </div> -->
    <h4 class="detail-base-title" ref="baseInfo6">历史注册地址<span>{{adedrssDatas.length}}</span></h4>
    <div class="table-wrap">
      <div class="box">
        <j-no-data v-if="adedrssDatas.length === 0" :mode="'b'" msg="b"></j-no-data>
        <ol v-else>
          <li v-for="list in adedrssDatas" :key="list.id">
            <span>{{list.date}}</span>
            <span>{{list.space}}</span>
          </li>
        </ol>
      </div>
    </div>
  </div>
</template>
<script>
import { entdetail as api } from '../../api'
import { jNoData, jTabNav } from '../../components'
export default {
  data() {
    return {
      tabList: [],
      gsxx: 0,
      gdxx: 0,
      zyry: 0,
      gsbg: 0,
      lszc: 0,
      wxgzh: 0,
      // 历史
      adedrssDatas: [],
      industry:'',
      // 分页的当前页数
      currentPage3: 1,
      parentName:'',
      shareholderTitle: [
        '股东类型',
        '股东',
        '认缴出资(金额/时间)',
        '实缴出资(金额/时间)'
      ],
      weichartTitle: ['序号', '微信公众号', '微信号', '二维码', '功能介绍'],
      businessChange: ['序号', '变更日期', '变更事项', '变更前', '变更后'],
      businessData: {},
      majorPerson: [],
      shareholderData: [],
      businessChangeData: [],
      weichartData: [],
      personPager: {
        total: 0,
        pageSize: 10,
        pageNum: 1
      },
      shareholderPager: {
        total: 0,
        pageSize: 10,
        pageNum: 1
      },
      businessPager: {
        total: 0,
        pageSize: 10,
        pageNum: 1
      },
      weichartPager: {
        total: 0,
        pageSize: 5,
        pageNum: 1
      },
      params: {
        pageSize: 10,
        pageNum: 1
      }
    }
  },
  mounted() {
    this.params.entName = this.shareholderPager.entName = this.personPager.entName = this.businessPager.entName = this.weichartPager.entName = this.$route.query.entname
    // this.params.entId = 1
    if (this.$route.query.parentName) {
      this.parentName = this.$route.query.parentName
    }
    this.getbusinessData()
    this.getshareHolder()
    this.getMajorperson()
    this.getEntchange()
    // this.getweichart()
    // 后期使用
    this.getHistoryList()
  },
  methods: {
    handleSizeChange() {
      // 当pagesize改变的时候出发该函数
    },
    handleCurrentChange() {
      // 当切换页码的时候出发的函数
    },
    // 工商信息
    getbusinessData() {
      api.getBusinessInfobase(this.params).then(ret => {
        // console.log(ret)
        if (!this.gsxx) {
          this.tabList.push({
            idx: 1,
            name: '工商信息',
            num: ret.data.entName ? 1 : 0,
            offsetTop: this.$refs['baseInfo1'] ? this.$refs['baseInfo1'].offsetTop : 0
          })
        }
        if (!ret.data) return false
        if (ret.data) {
          this.businessData = ret.data
        }
      }).catch(err => {
        console.log(err)
        if (!this.gsxx) {
          this.tabList.push({
            idx: 1,
            name: '工商信息',
            num: 0,
            offsetTop: this.$refs['baseInfo1'] ? this.$refs['baseInfo1'].offsetTop : 0
          })
        }
        this.gsxx++
      })
      if (this.parentName) {
        let param = {
          entName: this.params.entName,
          parentName: this.parentName
        }
        api.getRiskBaseinfo(param).then(rtn => {
          if (!rtn.data) return false
          this.industry = rtn.data.industry
        })
      } else {
        let param = {
          entName: this.params.entName
        }
        api.getRiskBaseinfo(param).then(rtn => {
          if (!rtn.data) return false
          this.industry = rtn.data.industry
        })
      }
    },
    // 股东信息
    getshareHolder(param) {
      if (param) {
        this.shareholderPager = Object.assign(this.shareholderPager, param)
      }
      api.getShareholder2(this.shareholderPager).then(ret => {
        if (!this.gdxx) {
          this.tabList.push({
            idx: 2,
            name: '股东信息',
            num: ret.data.total || 0,
            offsetTop: this.$refs['baseInfo2'] ? this.$refs['baseInfo2'].offsetTop : 0
          })
        }
        this.gdxx++
        if (!ret.data.list) return false
        // console.log(ret.data)
        this.shareholderData = ret.data.list
        this.shareholderPager.total = ret.data.total
      }).catch(err => {
        console.log(err)
        if (!this.gdxx) {
          this.tabList.push({
            idx: 2,
            name: '股东信息',
            num: 0,
            offsetTop: this.$refs['baseInfo2'] ? this.$refs['baseInfo2'].offsetTop : 0
          })
        }
        this.gdxx++
      })
    },
    // 主要人员
    getMajorperson(param) {
      if (param) {
        this.personPager = Object.assign(this.personPager, param)
      }
      api.getMajorPerson2(this.personPager).then(ret => {
      // api.getMajorPerson(this.personPager).then(ret => {
        if (!this.zyry) {
          this.tabList.push({
            idx: 3,
            name: '主要人员',
            num: ret.data.total || 0,
            offsetTop: this.$refs['baseInfo3'] ? this.$refs['baseInfo3'].offsetTop : 0
          })
        }
        this.zyry++
        if (!ret.data.list) return false
        var data = ret.data.list
        this.majorPerson = data
        this.personPager.total = ret.data.total
        // if (!this.zyry) {
        //   this.tabList.push({
        //     idx: 3,
        //     name: '主要人员',
        //     num: ret.data.total || 0,
        //     offsetTop: this.$refs['baseInfo3'].offsetTop || 0
        //   })
        // }
        // this.zyry++
        // var data = ret.data.list
        // this.majorPerson = []
        // if (data.length > 0) {
        //   for (var i = 0; i < data.length; i += 2) {
        //     var item = {
        //       department: data[i].department,
        //       name: data[i].name,
        //       department1: i + 1 < data.length ? data[i + 1].department : null,
        //       name1: i + 1 < data.length ? data[i + 1].name : null
        //     }
        //     this.majorPerson.push(item)
        //   }
        //   // console.log(this.majorPerson)
        // }
        // this.personPager.total = ret.data.total
      }).catch(err => {
        console.log(err)
        if (!this.zyry) {
          this.tabList.push({
            idx: 3,
            name: '主要人员',
            num: 0,
            offsetTop: this.$refs['baseInfo3'] ? this.$refs['baseInfo3'].offsetTop : 0
          })
        }
        this.zyry++
      })
    },
    // 工商变更
    getEntchange(param) {
      if (param) {
        this.businessPager = Object.assign(this.businessPager, param)
      }
      this.businessPager.order = 'desc'
      this.businessPager.sortColumn = 'change_date'
      api.getEntchange2(this.businessPager).then(ret => {
      // api.getEntchange(this.businessPager).then(ret => {
        if (!this.gsbg) {
          this.tabList.push({
            idx: 4,
            name: '工商变更',
            num: ret.data.total || 0,
            offsetTop: this.$refs['baseInfo4'] ? this.$refs['baseInfo4'].offsetTop : 0
          })
        }
        this.gsbg++
        if (!ret.data) return false
        this.businessChangeData = ret.data.list
        this.businessPager.total = ret.data.total
        // if (!this.gsbg) {
        //   this.tabList.push({
        //     idx: 4,
        //     name: '工商变更',
        //     num: ret.data.length || 0,
        //     offsetTop: this.$refs['baseInfo4'].offsetTop || 0
        //   })
        // }
        // this.gsbg++
        // this.businessChangeData = ret.data
        // this.businessPager.total = ret.data.length
      }).catch(err => {
        console.log(err)
        if (!this.gsbg) {
          this.tabList.push({
            idx: 4,
            name: '工商变更',
            num: 0,
            offsetTop: this.$refs['baseInfo4'] ? this.$refs['baseInfo4'].offsetTop : 0
          })
        }
        this.gsbg++
      })
    },
    // 微信公众号
    getweichart(param) {
      // wxgzh
      if (param) {
        this.weichartPager = Object.assign(this.weichartPager, param)
      }
      api.getEntchange2(this.weichartPager).then(ret => {
        if (!this.wxgzh) {
          this.tabList.push({
            idx: 5,
            name: '微信公众号',
            num: ret.data.total || 0,
            offsetTop: this.$refs['baseInfo5'] ? this.$refs['baseInfo5'].offsetTop : 0
          })
        }
        this.wxgzh++
        if (!ret.data) return false
        this.weichartData = ret.data.list
        this.weichartPager.total = ret.data.total
      }).catch(err => {
        console.log(err)
        if (!this.wxgzh) {
          this.tabList.push({
            idx: 5,
            name: '微信公众号',
            num: 0,
            offsetTop: this.$refs['baseInfo5'] ? this.$refs['baseInfo5'].offsetTop : 0
          })
        }
        this.wxgzh++
      })
    },
    personPaging(index) {
      this.personPager.pageNum = index
      this.getMajorperson(this.personPager)
    },
    entchangePaging(index) {
      this.businessPager.pageNum = index
      this.getEntchange(this.businessPager)
    },
    weichartPaging(index) {
      this.weichartPager.pageNum = index
      this.getweichart(this.weichartPager)
    },
    shareholderPaging(index) {
      this.shareholderPager.pageNum = index
      this.getshareHolder(this.shareholderPager)
    },
    // 获取历史注册地址
    getHistoryList() {
      let param = {
        entName: this.$route.query.entname
      }
      api.getHistoryAddress(param).then(rtn => {
        if (!this.lszc) {
          this.tabList.push({
            idx: 6,
            name: '历史注册地址',
            num: rtn.data.length || 0,
            offsetTop: this.$refs['baseInfo6'] ? this.$refs['baseInfo6'].offsetTop : 0
          })
        }
        this.lszc++
        if (!rtn.data) return false
        this.adedrssDatas = rtn.data
        this.adedrssDatas.forEach(address => {
          if (address.space === '空' || address.space === '') {
            address.space = '该时期暂无注册地址信息'
          }
        })
      }).catch(err => {
        console.log(err)
        if (!this.lszc) {
          this.tabList.push({
            idx: 6,
            name: '历史注册信息',
            num: 0,
            offsetTop: this.$refs['baseInfo6'] ? this.$refs['baseInfo6'].offsetTop : 0
          })
        }
        this.lszc++
      })
    }
  },
  components: {
    jNoData,
    jTabNav
  }
}
</script>
<style lang="scss" scoped>
.baseinfo {
  padding: 28px 40px;
  .text-left {
    text-align: left;
    padding-left: 20px;
  }
  h4.detail-base-title {
    line-height: 30px;
    font-size: 16px;
    font-weight: bold;
    padding: 30px 0 0 12px;
    position: relative;
    background-image: linear-gradient(0deg, #1891ef, #1891ef);
    background-size: 3px 16px;
    background-position: 0 37px;
    background-repeat: no-repeat;
    border-bottom: 1px solid #eee;
  }
  h4.detail-base-title span {
    border: 1px solid #9dc5fd;
    border-radius: 10px;
    color: #1688f3;
    background: #f2f7ff;
    font-size: 12px;
    padding: 0 10px;
    margin-left: 15px;
    vertical-align: top;
  }
  .table-wrap {
    padding: 30px 20px;
    table {
      border-collapse: collapse;
      width: 100%;
      text-align: center;
      td,
      th {
        border: 1px solid #e2e2e2;
        line-height: 40px;
      }
      th {
        line-height: 38px;
        color: #999;
        background: #f2f1f1;
      }
      td.long {
        text-align: left;
        padding: 10px;
        line-height: 24px;
      }
      &.business {
        th {
          width: 232px;
        }
        td {
          text-align: left;
          padding-left: 20px;
        }
      }
      &.business-change {
        th,
        td {
          line-height: 16px;
          padding: 10px 18px;
          word-wrap: break-word;
          word-break: break-all;
          white-space: normal;
        }
        th:first-child {
          width: 50px;
        }
        th:nth-of-type(2) {
          width: 140px;
        }
        td {
          text-align: left;
        }
        td.text-c {
          text-align: center;
        }
      }
    }
  }
  .box {
    width: 800px;
    padding-bottom: 20px;
    // height: 310px;
    // background: url('../../assets/images/trend.png') no-repeat;
    /*background-color: red;*/
    margin: 0 auto;
    ol {
      width: 100%;
      padding-left: 50px;
      box-sizing: border-box;
      li{
        height: auto;
        span{
          width:100%;
          font-size: 16px;
          color: #539cff;
        }
        // span:nth-child(2) {
        //   width:100%;
        //   font-weight: bold;
        // }
      }
      li {
        width: 100%;
        position: relative;
        top: -2px;
        // padding-bottom: 20px;
        padding-top: 20px;
        background: url('../../assets/images/circle1.png') no-repeat;
        // height: 45px;
        // line-height: 60px;
        &:nth-child(1){
          // height: 20px;
          padding-top: 5px;
          background: url('../../assets/images/circle.png') no-repeat 0 10px;
          // line-height: 20px;
        }
        span {
          display: inline-block;
          // width: 100%;
          font-size: 14px;
          color: #539cff;
          margin-left: 40px;
        }
        span:nth-child(2){
          color:#000;
          margin-top: 5px;
        }
        // span:nth-child(2) {
        //   color: #404450;
        //   font-size: 14px;
        //   margin-left: 50px;
        // }
      }
    }
  }
  .detail-base-main {
    padding: 30px 0 20px 20px;
  }
  .top {
    position: fixed;
    bottom:30px;
    right: 30px;
    border:1px solid #888;
  }
}
</style>



// WEBPACK FOOTER //
// src/view/entDetail/baseInfo.vue